<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				姓名：{{username}}
			</div>
			<div>
				转为大写：{{upperName}}
			</div>
			<div>
				转为小写：{{lowerName}}
			</div>
			<div>
				分割反转：{{reverseName}}
			</div>
			
			<div>
				姓名：{{username}}
			</div>
			<div>
				转为大写：{{getUpperNameFun()}}
			</div>
			<div>
				转为小写：{{getLowerNameFun()}}
			</div>
			<div>
				分割反转：{{getReverseNameFun()}}
			</div>
			
			
			<div>
				firstname：{{firstname}}
			</div>
			<div>
				lastname：{{lastname}}
			</div>
			<div>
				全名：{{joinName}}
			</div>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					username: 'Zhang San',
					firstname: '',
					lastname: '',
					fullname: ''
				},
				watch: {
					firstname: function(val) {
						this.fullname = val + ' ' + this.lastname 
					},
					lastname: function(val) {
						this.fullname = this.firstname + ' ' + val
					}
				},
				computed: {
					// username 转为大写
					upperName() {
						return this.username.toUpperCase();
					},
					// username 转为小写
					lowerName() {
						return this.username.toLowerCase();
					},
					// username 分割反转
					reverseName() {
						return this.username.split(' ').reverse().join('@');
					},
					// 计算 firstname + ' ' + lastname
					joinName: {
						get: function() {
							return this.firstname + ' ' + this.lastname
						},
						set: function(newVal) {
							var arr = newVal.split(' ')
							this.firstname = arr[0]
							this.lastname = arr[1]
						}
					}
				},
				methods: {
					// username 转为大写
					getUpperNameFun() {
						return this.username.toUpperCase();
					},
					// username 转为小写
					getLowerNameFun() {
						return this.username.toLowerCase();
					},
					// username 分割反转
					getReverseNameFun() {
						return this.username.split(' ').reverse().join('@');
					}
				}
			})
		</script>
	</body>
</html>